.designer-container {

}

.designer-container-panel {
  background: #595959;
  height: calc(100vh - 39px);
  overflow-y: auto;
}

.form-designer-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.form-designer-container:hover::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.form-designer-container {
  display: flex;
  justify-content: center;
  overflow-y: auto;
}

.form-designer-container .form-designer-body {
  background: white;
  min-height: 1000px;
  margin-top: 20px;
  margin-bottom: 50px;
}

.form-designer-left, .form-designer-right {
  width: 250px;
  position: fixed;
  height: calc(100vh - 40px);
  bottom: 0;
  background: white;
}

.form-designer-right {
  width: 300px;
}

.form-designer-left {
  left: 0;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
  z-index: 10;
  border-right: 1px solid rgb(220, 223, 230);
}

.form-designer-right {
  right: 0;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
  /*z-index: 100;*/
  border-left: 1px solid rgb(220, 223, 230);
}

.designer-container {

}

.designer-container .el-tabs__content {
  padding: 0;
}

.designer-container .el-tabs__header {
  margin: 0;
}

.designer-container .el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}

.design-table-label {
  user-select: none;
  border: 1px solid var(--el-border-color);
  border-radius: 2px;
  margin: 15px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: auto;
}

.design-form-icon {
  user-select: none;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: auto;
}

.form-designer-active {
  border: 1px solid #79bbff;
}

.form-designer-label {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hide {
  opacity: 0.5;
  border: 1px solid black;
  border-radius: 2px;
}

.placeholder {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #66b1ff;
}

.dragging-block {
  opacity: 0.2;
  border: 1px solid black;
}

.drag-block {
  position: relative;
}

.drag-bar-container {
  position: absolute;
  right: 5px;
  top: 5px;
  display: none;
  /*display: flex;*/
  width: 50px;
  align-items: center;
  justify-content: end;
}

.drag-bar-container * {
  margin-left: 5px;
}

.drag-block:hover > .drag-bar-container {
  display: flex;
}

.designer-container .designer-component-icon {
  font-size: 20px;
}

.expand-width-bar {
  cursor: pointer;
}

.drag-delete-bar {
  cursor: pointer;
}

.drag-move-bar {
  cursor: move;
}

.dragging-hover-layout-component {
  padding-top: 10px;
  border: 1px dashed black;
  box-sizing: border-box;
}

.selected-component {
}

.drag-selectable, .drag-selectable * {
  cursor: pointer !important;
}

.form-designer-container .footer-panel {
  position: fixed;
  left: 251px;
  bottom: 0;
  width: calc(100vw - 552px);
  height: 25px;
  background: rgb(79, 79, 79);
  color: rgb(255, 255, 255);
  padding: 0 10px;
  box-sizing: border-box;
}

.designer-container .designer-container-header > .el-tabs__header {
  z-index: 5;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.designer-container-panel:hover::-webkit-scrollbar {
  width:0 !important;
  height:0 !important;
}
